<template>
  <el-popover placement="right" :width="800" trigger="click">
    <template #reference>
      <el-progress :text-inside="true" style="width: 100%;min-width: 100px;" :stroke-width="16" :percentage="progress"
        status="success" />
    </template>
    <div class="workList">
      <el-scrollbar>
        <div class="list-b-8 p-12">
          <div class="title">订单生产总耗时：{{ proxy.$arrTotal(list, 'actualHour') }}分钟</div>
          <div class="workList-item list-b-6" v-for="(item, index) in list">
            <div class="hd list-r-8">
              <el-tag v-if="item.craftTaskState === 0 || !item.beginProduceTime" type="info" size="small"
                effect="dark">待开始
              </el-tag>
              <el-tag v-else-if="item.craftTaskState === 1" size="small" effect="dark">生产中</el-tag>
              <el-tag v-else-if="item.craftTaskState === 2" type="success" size="small" effect="dark">已完成</el-tag>
              <el-tag v-else-if="item.craftTaskState === 3" type="warning" size="small" effect="dark">分批中</el-tag>
              <el-tag v-else-if="item.craftTaskState === -1" type="warning" size="small" effect="dark">暂停中</el-tag>
              <b>{{ index + 1 }}.{{ item.craftName }}-{{
                item.machineName
              }}</b>
              <el-tag v-if="item.craftTaskPlanUseTime < item.actualHour" type="danger" size="small" effect="dark">
                超时{{ item.actualHour - item.craftTaskPlanUseTime }}分钟
              </el-tag>
            </div>
            <div class="c9  list-r-8">
              <span>计划用时：{{ item.craftTaskPlanUseTime }}分钟</span>
              <el-divider direction="vertical"></el-divider>
              <span>实际用时：{{ item.actualHour }}分钟</span>
            </div>
            <div class="c9  list-r-8">
              <span>计划米数：{{ item.planCpMeters }}米</span>
              <el-divider direction="vertical"></el-divider>
              <span>生产总米数：{{ item.actualHour }}米</span>
              <el-divider direction="vertical"></el-divider>
              <span>良品总米数：--米</span>
              <el-divider direction="vertical"></el-divider>
              <span>不良品总米数：--米</span>
              <el-divider direction="vertical"></el-divider>
              <span>良品率：--%</span>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </el-popover>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    progress?: number;
    list?: any;
  }>(),
  {
    list: []
  },
);
</script>
<style scoped lang="scss">
.workList {
  height: 400px;

  .title {
    background: #3f61f1;
    color: #fff;
    padding: 4px 8px;
    height: 32px;
    display: flex;
    align-items: center;
    border-radius: 3px;
  }

  .workList-item {
    &:not(:last-child) {
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px #e6e6e6 solid;
    }

    .hd {
      display: flex;
      align-items: center;
    }

    .bd {
      >span {
        display: inline-flex;
        min-width: 120px;
      }
    }
  }
}
</style>
